import { useTitle } from 'ahooks'
import style from './style.less';
import React, { useCallback, useEffect, useState } from 'react'
import { Button, Form, Input, List, Toast } from 'antd-mobile';
import { history, useSearchParams } from 'umi';
import img from '@/images/supply/turnip.png'
import SRC from '@/images/supply/shopping.png'
import Picker from '@/components/area-picker'
import { getInformationById, getPurchaserAdd, getUserPhone } from '@/services/Publish';
interface Shipment {
    areaCode: string
    shipmentPlace: string[]
}
interface commodityOrderAddDto {
    areaCode: string,
    commodityName: string,
    expectedAmount: number,
    expectedPrice: number,
    picture?: string,
    originPlace: string,
    purchaserId: number,
    purchaserName: string,
    purchaserPhone: string,
    shipmentPlace: string,
    shippingAddress: string,
    supplierId: number,
    supplierName: string,
    supplierPhone: string,
    supportBilling: boolean,
    totalMoney: number,
}

export default () => {
    useTitle('确认采购订单')
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false)
    const { validateFields, resetFields } = form;
    const [searchParams] = useSearchParams();
    const [value, setValue] = useState<Shipment>({} as Shipment)
    const [data, setData] = useState<commodityOrderAddDto>({} as commodityOrderAddDto)
    const [supply, setSupply] = useState({})
    const query = {
        expectedPrice: Number(searchParams.get('expectedPrice')),
        expectedAmount: Number(searchParams.get('expectedAmount')),
        supplierId: String(searchParams.get('id')),
        totalMoney: Number(searchParams.get('expectedPrice')) * Number(searchParams.get('expectedAmount'))
    }
    const onFinish = async (values: any) => {
        const message = { ...value, ...values, ...query, ...supply }
        console.log(message)
        await getPurchaserAdd(message)
        resetFields();
        history.push('/supply/detail/confirm/result')

    }

    const getData = async () => {
        const res = await getInformationById(query.supplierId)
        const userInfo = await getUserPhone(res.userId)
        console.log(userInfo);

        setData(res)
        console.log(res);
        const aa = {
            commodityName: res.commodityName,
            negotiateUserId: res.userId,
            supplierName: userInfo.contactName,
            supplierPhone: userInfo.contactPhone,
            originPlace: res.originPlace,
            variety: res.code,
            supportBilling: res.codeStatus,
            imageUrl:res.picture,
        }
        setSupply(aa)

    }
    useEffect(() => {
        getData()
    }, [])

    const validateMessages = {
        required: "${label}是必填字段",
    };

    return (
        <div className={style.page}>
            <div className={style.contents}>
                <Form
                    requiredMarkStyle='none'
                    layout='horizontal'
                    mode='card'
                    form={form}
                    onFinish={onFinish}
                    validateMessages={validateMessages}
                    footer={
                        <div className={style['btn-warp']}>
                            <div>
                                <Button color="primary" block onClick={() => { form.submit() }}
                                    size='large' style={{ backgroundColor: '#21B47C' }}
                                >
                                    提交
                                </Button>
                            </div>
                        </div>
                    }
                >
                    <div className={style.block}>
                        <Form.Item
                            label='所在地区'
                            // name='areaCode'
                            rules={[
                                {
                                    validator: (_, value) => {
                                        if (!value || !value.shipmentPlace || !value.areaCode) {
                                            return Promise.reject('请选择完整所在地区')
                                        }
                                        return Promise.resolve()
                                    },
                                },
                            ]}
                            onClick={() => {
                                setVisible(true)
                            }}
                        >
                            <Picker
                                title='选择地区'
                                visible={visible}
                                onClose={() => {
                                    setVisible(false)
                                }}
                                onConfirm={v => {
                                    form.setFieldValue('areaCode', v)
                                    form.validateFields(['areaCode']).then(() => {
                                        setVisible(false)
                                    })
                                    setValue(v)
                                }}
                            />
                            {value["shipmentPlace"]}
                        </Form.Item>
                        <Form.Item label='详细地址' name='shippingAddress' rules={[{ required: true }]}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label='名称' name='purchaserName' rules={[{ required: true }]}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label='电话' name='purchaserPhone' rules={[
                            { required: true },
                            { pattern: /^1\d{10}$/, message: '请输入正确的手机号码' },
                        ]}
                        >
                            <Input placeholder='请输入' />
                        </Form.Item>
                    </div>
                </Form>
            </div>
            <div className={style.item}>
                <div className={style.title}>
                    <img src={SRC} alt='src' className={style.src} />
                    <span>四季化肥批发</span>
                </div>
                <div className={style.content}>
                    <div
                        className={style.img}
                        style={{ backgroundImage: `url(${data?.picture})` }}
                    />
                    <div className={style.info}>
                        <div className={style.name}>{data?.commodityName}</div>
                        <div className={style.tags}>
                            <span>发货地</span>
                            {data?.shipmentPlace}
                        </div>
                    </div>
                </div>
            </div>
            <div className={style.block}>
                <List mode='card'>
                    <List.Item extra={'￥' + query.expectedPrice.toFixed(2)}>单价</List.Item>
                    <List.Item extra={query.expectedAmount + '斤'}>采购数量</List.Item>
                    <List.Item
                        extra={
                            <span className={style.money}>
                                {'￥' + (query.totalMoney).toFixed(2)}
                            </span>
                        }
                    >
                        合计
                    </List.Item>
                </List>
            </div>

        </div>
    )
}
